{include file="common/header-top" /}

<style>
    .step-span{
        font-size: 14px;
        font-weight: bold;
    }

    .van-cell-li{
        padding-top: 0px;
        padding-bottom: 0px;
        padding-right: 0px;
        min-height: 44px;
    }
    .van-cell-li .van-cell__left-icon{
        display: inline-block;
        padding-top: 10px;
    }
    .van-cell-li .van-cell__title span{
        display: inline-block;
        padding-top: 10px;
    }
    .van-cell-li .van-cell__value .van-field{
        background-color: #2aa24512;
        padding: 8px 10px;
        margin-top: 1px;
    }


    .job-detail-title-cell{
        padding: 3px;
    }

    .job-detail-title{
        font-size: 18px;
        font-weight: 500;
    }

    .job-detail-money-cell{
        margin-top: 2px;
    }
    .job-detail-money{
        display: block;
    }
    .job-detail-money span{
        display: block;
        padding: 2% 0%;
    }

    .thirdStep-cell-li .van-cell__title{
        max-width: 26%;
    }


    .article {
        padding-left: 10px;
        padding-right: 10px;
        overflow: auto;
        padding-top: 20px;
    }
    .article img {
        max-width: 100% !important;
    }






</style>


<div id="app"  v-cloak>

    <van-nav-bar title="商品详情" left-arrow @click-left="goBack" left-text="返回"></van-nav-bar>

    <van-row>
        <van-col span="24">
            <!--图片轮播-->
            <van-swipe :autoplay="3500" indicator-color="white" :height="180" >
                <van-swipe-item v-for="(item,index) in goodsInfo.imageArr" @click="previewGoodsImg(index)">
                    <van-image :src="item" fit="fill" ></van-image>
                </van-swipe-item>
            </van-swipe>
            <!--图片轮播-->
        </van-col>
    </van-row>

        <div style="padding-bottom: 55px;">
            <van-row>
                <van-col span="24">
                    <van-cell :border="false" class="job-detail-title-cell">
                        <span class="van-ellipsis job-detail-title" :title="goodsInfo.name">{{goodsInfo.name}}</span>
                    </van-cell>
                </van-col>

                <van-col span="24">
                    <van-col span="12" class="job-detail-money-cell">
                        <van-tag plain class="job-detail-money">
                            <span class="money-font" style="font-size: 22px;color: #fe9e39;">{{goodsInfo.money}}元</span>
                        </van-tag>
                    </van-col>
                    <van-col span="12">
                        <van-cell  icon="/__FRONT__/images/icon/baozhang.png" :border="false">
                            <van-tag slot="default" type="success">{{approveName}}</van-tag>
                        </van-cell>
                    </van-col>

                </van-col>

            </van-row>



            <van-divider :style="{borderColor: '#32a14a', padding: '0 2px' }"></van-divider>

            <van-cell :title="getSetp3Location"
                      icon="/__FRONT__/images/icon/location-icon.png"
                      style="padding-top: 0px;"
                      :border="false"
            ></van-cell>


            <van-row>
                <van-cell title="商品信息" icon="/__FRONT__/images/icon/job-detail-icon.png" size="large">
                    <van-icon name="arrow-down"></van-icon>
                </van-cell>
                <van-cell title="数量:"
                          class="thirdStep-cell-li"
                          icon="/__FRONT__/images/icon/goods-num.png"
                          :value="goodsInfo.number + '件'">
                </van-cell>
                <van-cell title="商品原价:"
                          class="thirdStep-cell-li"
                          icon="/__FRONT__/images/icon/publish-job-money.png"
                          :value="goodsInfo.oprice + '元'">
                </van-cell>
                <van-cell title="卖家:"
                          class="thirdStep-cell-li"
                          icon="/__FRONT__/images/icon/publish-job-contacts.png"
                          :value="goodsInfo.contacts">
                </van-cell>
                <van-cell title="联系电话:"
                          class="thirdStep-cell-li"
                          icon="/__FRONT__/images/icon/job-detail-mobile.png"
                          :value="goodsInfo.ignoreMobile">
                </van-cell>
                <van-cell title="微信:"
                          class="thirdStep-cell-li"
                          icon="/__FRONT__/images/icon/user-setting-wechat.png"
                          :value="goodsInfo.wechat_num">
                </van-cell>
                <van-cell title="QQ:"
                          class="thirdStep-cell-li"
                          icon="/__FRONT__/images/icon/qq.png"
                          :value="goodsInfo.qq_num">
                </van-cell>
            </van-row>


            <van-row>
                <van-cell title="商品详情" icon="/__FRONT__/images/icon/job-detail-content.png" size="30px">
                    <van-icon name="arrow-down"></van-icon>
                </van-cell>
                <van-col span="24">
                    <section class="article" >
                        {{goodsInfoExtend.content}}
                    </section>
                </van-col>
            </van-row>

        </div>



    <van-row>
        <van-col span="24">
            <van-goods-action>
                <van-goods-action-icon
                        :icon="getCollectImg"
                        text="收藏"
                        :info="getCollectNum"
                        @click="collectMarketGoods"
                ></van-goods-action-icon>
                <van-goods-action-button
                        type="danger"
                        color="#f32108"
                        text="联系卖家"
                        style="border-radius: 0px; margin-left: 20px;"
                        :url="getSalePhoneUrl"
                ></van-goods-action-button>
            </van-goods-action>
        </van-col>
    </van-row>





</div>


<script src="/__FRONT__/plugs/wechatJsSDK/jweixin-1.4.0.js"></script>

<script>

    Vue.use(vant.Lazyload);
    var vm = new Vue({
        //挂载点
        el: '#app',
        //数据集合
        data() {
            return {

                active:2,
                userCenterIcon: {
                    normal: '/__FRONT__/images/icon/usercenter-n.png',
                    active: '/__FRONT__/images/icon/usercenter-a.png'
                },
                erShouIcon: {
                    normal: '/__FRONT__/images/icon/ershou-n.png',
                    active: '/__FRONT__/images/icon/ershou-a.png'
                },

                //用户信息
                userInfo: {},


                //详情详情
                goodsInfo: {
                    id: {$id},
                    tid: 0,
                    name: '',
                    logo: '',
                    image: '',
                    typeName: '',
                    oprice: '',
                    extendContent: '',
                    money: '',
                    number: 1,
                    contacts: '',
                    mobile: '',
                    provinces_id: '',
                    city_id: '',
                    county_id: '',
                    address: '',
                    provinces_name: '',
                },
                //商品扩展表
                goodsInfoExtend:{
                    id:0,
                    market_id: {$id},
                    content:''
                },

            }
        },

        //创建时执行 操作
        created : function (){

            //微信js SDK 配置
            wx.config({
                debug: false,
                appId: '{$wechatJsSDK.appId|default=""}',
                timestamp: '{$wechatJsSDK.timestamp|default=""}',
                nonceStr: '{$wechatJsSDK.nonceStr|default=""}',
                signature: '{$wechatJsSDK.signature|default=""}',
                jsApiList: [
                    'updateAppMessageShareData',
                    'updateTimelineShareData',
                    'onMenuShareTimeline',
                    'onMenuShareAppMessage',
                    'onMenuShareQQ',
                    'onMenuShareWeibo',
                    'onMenuShareQZone',
                ]
            });

            //个人信息
            axiosRequest.get('/api/user/userInfo').then(function (response) {
                if (response.code == 200) {
                    vm.$data.userInfo = response.data.userInfo;
                } else {
                    vant.Toast(response.msg);
                }
            });

            //获取二手商品详情
            var params = {
                id: this.goodsInfo.id,
                extend: 'content,publishUser'
            };
            axiosRequest.get('/api/market/goodsDetail',{params:params}).then(function (response) {
                if (response.code == 200) {
                    vm.$data.goodsInfo = response.data;
                    vm.$data.goodsInfo.content = response.data.extendContent.content;
                    vm.$data.goodsInfoExtend = response.data.extendContent;
                    vm.$data.goodsInfo.money = parseFloat(vm.$data.goodsInfo.money);
                    vm.$data.goodsInfo.oprice = parseFloat(vm.$data.goodsInfo.oprice);
                    wx.ready(function () {
                        wx.updateAppMessageShareData({
                            title: vm.$data.goodsInfo.name + '-{$appName}',
                            desc: vm.$data.goodsInfo.marketTypeName,
                            link: '{$baseHost}index/Market/goodsDetail?id=' + vm.$data.goodsInfo.id,
                            imgUrl: vm.$data.goodsInfo.logo,
                        });
                        wx.updateTimelineShareData({
                            title: vm.$data.goodsInfo.name + '-{$appName}',
                            desc: vm.$data.goodsInfo.marketTypeName,
                            link: '{$baseHost}index/Market/goodsDetail?id=' + vm.$data.goodsInfo.id,
                            imgUrl: vm.$data.goodsInfo.logo,
                        });
                    });
                } else {
                    vant.Toast({
                        message: response.msg,
                        onClose: function () {
                            history.back();
                        }
                    });
                }
            });


        },

        mounted(){
        },

        //计算属性
        computed:{
            getLocation(){
                return this.goodsInfo.provinces_name ? this.goodsInfo.provinces_name : '请选择区域';
            },
            getSetp3Location(){
                return this.goodsInfo.provinces_name + ' ' + this.goodsInfo.address;
            },
            isWriteDetail(){
                if (!this.goodsInfo.extendContent) {
                    return '请填写商品详情';
                } else {
                    return '已填写商品详情';
                }
            },
            getCollectNum(){
                return (this.goodsInfo.collect_num > 1000) ? '1000+' : this.goodsInfo.collect_num;
            },

            getCollectImg() {
                return this.goodsInfo.userCollect ? '/__FRONT__/images/icon/user-collect.png' : '/__FRONT__/images/icon/user-collect-no.png';
            },
            getSalePhoneUrl(){
                return 'tel:' + this.goodsInfo.mobile;
            },
            approveName(){
                if (this.userInfo.type == 1) {
                    return '个人认证';
                }
                if (this.userInfo.type == 2) {
                    return '商家认证';
                }
                return '平台认证';
            }
        },



        //方法集合 在 `methods` 对象中定义方法
        methods: {
            //返回上一页
            goBack(){
                history.back();
            },

            //二手商品图片预览
            previewGoodsImg(position){
                vant.ImagePreview({
                    images: this.goodsInfo.imageArr,
                    startPosition: position,
                });
            },


            //收藏
            collectMarketGoods(){
                var postData = {
                    id: this.goodsInfo.id,
                    type: 2,
                };
                if (this.goodsInfo.userCollect) {
                    //取消收藏
                    axiosRequest.post('/api/user/delCollect', postData).then(function (response) {
                        if (response.code == 200) {
                            vant.Toast('取消收藏成功！');
                            vm.$data.goodsInfo.collect_num -= 1;
                            vm.$data.goodsInfo.userCollect = false;
                        }
                    });
                } else {
                    //添加收藏
                    axiosRequest.post('/api/user/collect', postData).then(function (response) {
                        if (response.code == 200) {
                            vant.Toast('收藏成功！');
                            vm.$data.goodsInfo.collect_num += 1;
                            vm.$data.goodsInfo.userCollect = true;
                        }
                    });
                }
            }
        }

    });
</script>

{include file="common/foot-bottom" /}
